<template>
  <div id="bottom-bar">
    <div :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" style="background: white; width: 100%;">
      <!-- 首页 -->
      <div v-if="type == 'home'" class="bottom-bar-enterprise bottom-bar-card">
        <div class="icon-pane" @click="chooseType('大厅')">
          <img :src="tab_type == '大厅' ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating.png' : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating_1.png'" alt="" class="img-icon">
          <span :class="tab_type == '大厅' ? 'icon-name active-home-color' : 'icon-name'" >抢单大厅</span>
        </div>
        <!-- <div class="icon-pane" @click="chooseType('订单')">
          <img :src="tab_type == '订单' ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dingdan.png' : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dingdan_1.png'" alt="" class="img-icon">
          <span :class="tab_type == '订单' ? 'icon-name active-home-color' : 'icon-name'" >订单</span>
        </div> -->
        <div class="icon-pane" @click="chooseType('发布需求')">
          <i class="iconfont icon-icon_publish other-icon"></i>
          <span :class="tab_type == '发布需求' ? 'icon-name active-home-color' : 'icon-name'" >发布需求</span>
        </div>
        <div class="icon-pane" @click="chooseType('技能需求')">
          <i class="iconfont icon-icon_skill other-icon"></i>
          <span :class="tab_type == '技能需求' ? 'icon-name active-home-color' : 'icon-name'" >技能需求</span>
        </div>
        <div class="icon-pane" @click="chooseType('我的')">
          <img :src="tab_type == '我的' ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_me.png' : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_me_1.png'" alt="" class="img-icon">
          <span :class="tab_type == '我的' ? 'icon-name active-home-color' : 'icon-name'" >我的</span>
        </div>
      </div>

      <!-- 个人需求 -->
      <div v-if="type == 'individual'" class="bottom-bar-individual bottom-bar-card">
        <div class="icon-pane" @click="chooseType('大厅')">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating_1.png" alt="" class="img-icon">
          <span class="icon-name" >大厅</span>
        </div>
        <a :href="mobile" class="icon-pane">
          <van-icon name="phone-o" class="phone-icon"/>
          <span class="icon-name">电话</span>
        </a>
        <div class="icon-pane" @click="chooseType('我的')">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_me_1.png" alt="" class="img-icon">
          <span class="icon-name" >我的</span>
        </div>
        <div class="grab-pane" @click="receive">抢单</div>
      </div>

      <!-- 技师师傅-底部导航 -->
      <div v-if="type == 'skill_service'" class="bottom-bar-card skill-service-sty" style="justify-content: space-around;">
        <div class="icon-pane" @click="chooseType('大厅')">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating_1.png" alt="" class="img-icon">
          <span class="icon-name" >大厅</span>
        </div>
        <!-- <div class="icon-pane">
          <van-icon name="phone-o" class="phone-icon"/>
          <a :href="mobile"><span class="icon-name">电话</span></a>
        </div> -->
        <div class="mobile-row" @click="tabAppointment">预约</div>
      </div>

      <!-- 技能详情-底部导航 -->
      <div v-if="type == 'technician'" class="bottom-bar-card" style="justify-content: space-around;padding-left: 0;">
        <div style="flex-shrink: 0;display: flex;">
          <div class="icon-pane" @click="chooseType('大厅')">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating_1.png" alt="" class="img-icon">
            <span class="icon-name" >大厅</span>
          </div>
          <div class="icon-pane" @click="chooseType('我的')">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_me_1.png" alt="" class="img-icon">
            <span class="icon-name" >我的</span>
          </div>
        </div>
        <div style="flex:1;">
          <a :href="mobile" style="width: -webkit-fill-available;">
            <van-button round block color="#4978F8" size="small">电话联系</van-button>
          </a>
        </div>
        <!-- <a :href="mobile" style="width: -webkit-fill-available;"><div class="mobile-row">电话联系</div></a> -->
      </div>

      <!-- 企业需求-底部导航 -->
      <div v-if="type == 'enterprise'" class="bottom-bar-enterprise bottom-bar-card">
        <div class="icon-pane" @click="chooseType('大厅')">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_dating_1.png" alt="" class="img-icon">
          <span class="icon-name">大厅</span>
        </div>
        <a :href="mobile" class="icon-pane">
          <van-icon name="phone-o" class="phone-icon"/>
          <span class="icon-name">电话</span>
        </a>
        <div class="icon-pane" @click="chooseType('我的')">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_me_1.png" alt="" class="img-icon">
          <span class="icon-name">我的</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bottom_bar_controller from "./bottom_bar_controller.js";

export default bottom_bar_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle {
  width: 375px !important;
}

#bottom-bar {
  // background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;

  .active-home-color {
    color: #4978f8 !important;
  }

  .skill-service-sty {
    justify-content: space-between;

    .mobile-row {
      width: 60% !important;
    }
  }

  .bottom-bar-card {
    display: flex;
    padding: 0.8rem;
    align-items: center;

    .icon-pane {
      display: flex;
      flex-direction: column;
      width: 3.5rem;
      justify-content: center;
      align-items: center;

      .icon-img {
        width: 0.85rem;
        height: 0.85rem;
      }

      .icon-name {
        font-size: 0.82rem;
        font-weight: 400;
        color: #333;
        margin-top: 0.2rem;
        white-space: nowrap;
      }
    }

    .mobile-row {
      margin-left: 0.5rem;
      background: #4978f8;
      border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
      font-size: 0.95rem;
      font-weight: 400;
      color: #fff;
      line-height: 1;
      height: 2.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: -webkit-fill-available;
    }

    .box-mobile-popup {
      width: 14rem;
      height: 9.8rem;
      background: #fff;
      border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
      padding: 0.975rem 0.6rem 1.075rem 0.6rem;

      .call-sty {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.075rem;
        text-align: left;
      }

      .copy-sty {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
        padding: 0.975rem 0 1.075rem 0;
        border-top: 0.025rem solid #e7e7e7;
        border-bottom: 0.025rem solid #e7e7e7;
        text-align: left;
      }

      .add-stye {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
        margin-top: 1.075rem;
        text-align: left;
      }
    }
  }

  .bottom-bar-enterprise {
    display: flex;
    justify-content: space-around;
  }

  .bottom-bar-individual {
    display: flex;
    justify-content: space-between;
    // .icon-pane {
    //   width: initial;
    // }
  }

  .grab-pane {
    color: white;
    padding: 0.575rem 0;
    background: #4978f8;
    border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
    width: 15rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .phone-icon {
    font-size: 1.4rem;
    color: #999;
  }

  .other-icon {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
    color: #999;
  }
}
</style>
